CSS pielāgoto iezīmējumu kaskāde: teksta atlases prioritāšu pārvaldība

Noklusējuma teksta atlases iezīmējums tīmekļa pārlūkprogrammās bieži ir vienkāršs zils fons ar baltu tekstu. Lai gan tas ir funkcionāls, tas var neatbilst jūsu vietnes zīmolam vai pieejamības prasībām. Par laimi, CSS piedāvā spēcīgus rīkus teksta atlases iezīmējumu pielāgošanai, ļaujot jums izveidot vizuāli pievilcīgu un lietotājam draudzīgu pieredzi. Šajā rakstā aplūkosim CSS pielāgoto iezīmējumu kaskādi, izpētot dažādās pieejamās tehnikas un to, kā pārvaldīt to prioritāti, lai sasniegtu vēlamo efektu. Mēs apskatīsim standarta ::selection pseidoelementu, progresīvāko ::highlight pseidoelementu un to, kā definēt pielāgotus iezīmējumus, koncentrējoties uz kaskādes un specifiskuma noteikumiem, kas regulē to uzvedību.

Pamatu izpratne: ::selection pseidoelements

::selection pseidoelements ir teksta atlases stilizēšanas pamats CSS. Tas ļauj modificēt atlasītā teksta izskatu elementā. Tas ir plaši atbalstīts modernajās pārlūkprogrammās un nodrošina vienkāršu veidu, kā pielāgot atlasītā teksta fona krāsu, teksta krāsu un citas pamatīpašības.

::selection pamatlietojums

Lai izmantotu ::selection, jums vienkārši jānorāda tas CSS likumā un jādefinē vēlamie stili. Piemēram, lai mainītu fona krāsu uz dzeltenu un teksta krāsu uz melnu, kad teksts ir atlasīts, jūs izmantotu šādu CSS:

            ::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

Šis likums attieksies uz visām teksta atlasēm jūsu vietnē. Ja vēlaties atlasīt konkrētus elementus, varat izmantot specifiskākus selektorus:

            p::selection {
  background-color: lightgreen;
  color: darkgreen;
}

            

              
                Copy
              
            
          

Šis likums ietekmēs tikai teksta atlases <p> (rindkopu) elementos.

::selection ierobežojumi

Lai gan ::selection ir noderīgs rīks, tam ir ierobežojumi. Tas galvenokārt ļauj modificēt pamatīpašības, piemēram, background-color un color. Sarežģītākas stilizēšanas iespējas, piemēram, gradientu vai ēnu piemērošana, netiek tieši atbalstītas. Turklāt ::selection nenodrošina mehānismu vairāku, pārklājošos iezīmējumu ar dažādiem stiliem izveidei. Šeit talkā nāk ::highlight pseidoelements.

Iepazīstinām ar ::highlight: jaudīgāka alternatīva

::highlight pseidoelements ir jaunāks CSS papildinājums, kas piedāvā lielāku elastību un kontroli pār teksta atlases iezīmējumiem. Tas ļauj definēt nosauktus iezīmējumus, kas ļauj piemērot dažādus stilus dažādām atlasītā teksta daļām. Tas ir īpaši noderīgi sarežģītos izkārtojumos vai gadījumos, kad nepieciešams atšķirt dažādus satura veidus atlasē.

Nosaukto iezīmējumu definēšana ar highlight-name īpašību

Atslēga ::highlight lietošanai ir highlight-name īpašība. Šī īpašība ļauj piešķirt nosaukumu konkrētam iezīmējumam, kuru pēc tam varat atlasīt ar CSS likumiem. Lai izmantotu ::highlight, jums vispirms jādefinē nosauktais iezīmējums, izmantojot JavaScript. Tas ir tāpēc, ka pats CSS nevar definēt jaunu iezīmējuma nosaukumu; tas var tikai *stilizēt* iezīmējumus, kurus pārlūkprogramma jau ir izveidojusi. Šeit ir piemērs:

            // JavaScript:
CSS.registerProperty({
  name: '--my-custom-highlight',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent',
});

            

              
                Copy
              
            
          

Šis Javascript kods reģistrē CSS pielāgotu īpašību ar nosaukumu --my-custom-highlight, kas pieņem krāsu vērtības un netiek mantota. Šis ir nepieciešams solis pirms iezīmējuma stilizēšanas. Tagad varat izmantot CSS, lai piemērotu iezīmējumu:

            ::highlight(my-custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: white;
}

            

              
                Copy
              
            
          

Šis CSS likums atlasa iezīmējumu ar nosaukumu "my-custom-highlight" un piemēro sarkanu fonu ar 30% caurspīdīgumu un baltu tekstu. Ievērojiet rgba izmantošanu, lai panāktu caurspīdīgumu. Jums ir jāizveido nosaukums (piemēram, `my-custom-highlight`) un pēc tam jāatsaucas uz to CSS, izmantojot `::highlight(my-custom-highlight)`.

Iezīmējumu piemērošana ar JavaScript

Tagad, lai faktiski piemērotu iezīmējumu mūsu tīmekļa lapā, mēs izmantosim JavaScript. Tas parasti tiek darīts, ietinot iezīmējamo teksta daļu <span> tagā un piešķirot highlight-name stilu:

            <p>This is some <span style="--highlight: my-custom-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

Šajā piemērā vārds "important" tiks iezīmēts ar stiliem, kas definēti "my-custom-highlight". Cits piemērs varētu būt:

            <p>This is <span style="--highlight: warning-highlight;">a warning message</span> that needs attention.</p>

            

              
                Copy
              
            
          

Kur 'warning-highlight' atbilst nosaukumam, kuru reģistrējāt ar CSS.registerProperty un izmantojāt ::highlight(warning-highlight) CSS blokā.

::highlight priekšrocības

• Vairāki iezīmējumi: Jūs varat definēt vairākus nosauktus iezīmējumus un piemērot tos dažādām teksta daļām.
• Smalka kontrole: Jūs varat atlasīt konkrētas teksta sadaļas ar dažādiem iezīmējumu stiliem.
• Semantiskais iezīmējums: Jūs varat izmantot iezīmējumus, lai nodotu nozīmi, piemēram, iezīmējot kļūdas vai brīdinājumus.

CSS iezīmējumu kaskādes izpratne: prioritāte un specifiskums

Kad vienam un tam pašam tekstam tiek piemēroti vairāki iezīmējumu stili, CSS kaskāde nosaka, kurš stils ir primārais. Kaskāde ir noteikumu kopums, ko pārlūkprogrammas izmanto, lai atrisinātu konfliktus starp dažādiem CSS likumiem. Kaskādes izpratne ir būtiska, lai pārvaldītu pielāgotus iezīmējumu stilus un nodrošinātu, ka vēlamie stili tiek pareizi piemēroti.

Prioritāšu secība

CSS kaskāde seko noteiktai prioritāšu secībai, ko var apkopot šādi (no zemākās līdz augstākajai prioritātei):

1. Lietotāja aģenta stili: Pārlūkprogrammas noklusējuma stili.
2. Lietotāja stili: Lietotāja definēti stili (piem., izmantojot pārlūkprogrammas paplašinājumus).
3. Autora stili: Vietnes izstrādātāja definēti stili (jūsu CSS).
4. !important autora stili: Vietnes izstrādātāja definēti stili ar !important atslēgvārdu.
5. !important lietotāja stili: Lietotāja definēti stili ar !important atslēgvārdu.

Katrā no šiem līmeņiem specifiskumam ir izšķiroša loma. Specifiskums attiecas uz CSS selektora svaru vai nozīmīgumu. Specifiskāki selektori ignorē mazāk specifiskus selektorus.

Specifiskuma noteikumi

Specifiskums tiek aprēķināts, pamatojoties uz šādiem noteikumiem:

1. Iekļautie stili: Stiliem, kas definēti tieši HTML elementā, izmantojot style atribūtu, ir visaugstākais specifiskums.
2. ID: Selektoriem, kas atlasa elementus pēc to ID (piem., #my-element), ir augsts specifiskums.
3. Klases, pseidoklases un atribūti: Selektoriem, kas atlasa elementus pēc to klases (piem., .my-class), pseidoklasēm (piem., :hover) vai atribūtiem (piem., [type="text"]), ir vidējs specifiskums.
4. Elementi un pseidoelementi: Selektoriem, kas atlasa elementus pēc to taga nosaukuma (piem., p) vai pseidoelementiem (piem., ::selection, ::highlight), ir zems specifiskums.
5. Universālais selektors: Universālajam selektoram (*) ir viszemākais specifiskums.

Kad vienam un tam pašam elementam tiek piemēroti vairāki selektori, pārlūkprogramma aprēķina katra selektora specifiskumu un piemēro stilu no selektora ar augstāko specifiskumu. Ja diviem selektoriem ir vienāds specifiskums, tiek piemērots stils no selektora, kas CSS stilu lapā parādās vēlāk.

Specifiskuma piemērošana iezīmējumu stiliem

Strādājot ar pielāgotiem iezīmējumu stiliem, specifiskums ir īpaši svarīgs, jo jūs varat izmantot gan ::selection, gan ::highlight, iespējams, kopā ar iekļautajiem stiliem. Lūk, kā varētu piemērot specifiskuma apsvērumus:

1. ::selection pret ::highlight: ::highlight parasti tiek uzskatīts par *specifiskāku* nekā ::selection. Tas nozīmē, ka, ja vienam un tam pašam tekstam tiek piemēroti gan ::selection, gan ::highlight likumi, ::highlight likumi parasti būs prioritāri.
2. Iekļautie stili: Kā vienmēr, iekļautie stili (izmantojot style atribūtu tieši uz HTML elementa) ignorēs gan ::selection, gan ::highlight stilus, ja vien netiek izmantots !important.
3. Selektora specifiskums: Selektoru specifiskums, kas tiek izmantots ar ::highlight, var vēl vairāk ietekmēt rezultātu. Piemēram, p::highlight(my-highlight) ir specifiskāks nekā tikai ::highlight(my-highlight) un būs prioritārs, ja tiek piemēroti abi.

Specifiskuma piemēri darbībā

Ilustrēsim to ar dažiem piemēriem:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

::highlight(my-highlight) {
  background-color: red;
  color: yellow;
}

            

              
                Copy
              
            
          

            <p>This is some <span style="--highlight: my-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

Šajā gadījumā, kad lietotājs atlasa tekstu, daļai, kas apzīmēta kā "my-highlight", būs sarkans fons un dzeltens teksts, jo ::highlight(my-highlight) likums ir specifiskāks un ignorē vispārējo ::selection likumu konkrētajam span elementam.

Apskatīsim citu piemēru:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

p::selection {
  background-color: green;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is some text.</p>

            

              
                Copy
              
            
          

Šeit, ja lietotājs atlasa tekstu <p> tagā, tam būs zaļš fons un melns teksts. p::selection selektors ir specifiskāks nekā globālais ::selection selektors.

Stratēģijas iezīmējumu kaskādes pārvaldībai

Lai efektīvi pārvaldītu iezīmējumu kaskādi un nodrošinātu, ka jūsu pielāgotie iezīmējumu stili tiek piemēroti, kā paredzēts, apsveriet šādas stratēģijas:

1. Izmantojiet specifiskus selektorus

Izmantojiet specifiskus selektorus, lai atlasītu elementus, kurus vēlaties stilizēt. Piemēram, tā vietā, lai izmantotu globālu ::selection likumu, atlasiet konkrētus elementus vai vietnes sadaļas, izmantojot specifiskākus selektorus, piemēram, .my-section::selection vai #my-element::selection.

2. Izmantojiet highlight-name īpašību

Kad vien iespējams, izmantojiet highlight-name īpašību ar ::highlight, lai definētu nosauktus iezīmējumus. Tas ļauj atlasīt konkrētas teksta sadaļas un piemērot dažādus stilus, pamatojoties uz to semantisko nozīmi vai kontekstu.

3. Izvairieties no !important (parasti)

Lai gan !important atslēgvārda lietošana var būt vilinoša, no tās vajadzētu izvairīties, kad vien iespējams. !important izmantošana var apgrūtināt jūsu CSS uzturēšanu un radīt negaidītus konfliktus. Tā vietā koncentrējieties uz specifiskuma izmantošanu, lai kontrolētu kaskādi.

4. Organizējiet savu CSS

Organizējiet savu CSS loģiskā un konsekventā veidā. Izmantojiet komentārus, lai dokumentētu savu kodu un grupētu saistītos stilus. Tas atvieglos jūsu CSS izpratni un uzturēšanu.

5. Rūpīgi pārbaudiet

Rūpīgi pārbaudiet savus pielāgotos iezīmējumu stilus dažādās pārlūkprogrammās un ierīcēs. Dažādām pārlūkprogrammām var būt nedaudz atšķirīgas CSS kaskādes implementācijas, tāpēc ir svarīgi nodrošināt, ka jūsu stili tiek piemēroti konsekventi visās platformās.

6. Apsveriet pieejamību

Veidojot pielāgotus iezīmējumu stilus, vienmēr ņemiet vērā pieejamību. Pārliecinieties, ka jūsu izvēlētās krāsas nodrošina pietiekamu kontrastu starp tekstu un fonu. Tāpat izvairieties no stiliem, kas varētu būt traucējoši vai mulsinoši lietotājiem ar kognitīviem traucējumiem.

Pieejamības apsvērumi

Teksta atlases iezīmējumu pielāgošana var ievērojami uzlabot lietotāja pieredzi, taču ir ļoti svarīgi par prioritāti noteikt pieejamību. Slikti izstrādāti iezīmējumi var apgrūtināt satura lasīšanu un izpratni lietotājiem ar redzes traucējumiem vai kognitīviem traucējumiem.

Krāsu kontrasts

Pārliecinieties, ka krāsu kontrasts starp tekstu un fonu ir pietiekams. Tīmekļa satura pieejamības vadlīnijas (WCAG) iesaka kontrasta attiecību vismaz 4.5:1 normālam tekstam un 3:1 lielam tekstam. Izmantojiet tiešsaistes rīkus, lai pārbaudītu savu iezīmējumu krāsu kontrasta attiecību.

Izvairieties no mirgošanas

Izvairieties no mirgojošu efektu izmantošanas savos iezīmējumu stilos. Šie efekti var būt traucējoši un var izraisīt lēkmes lietotājiem ar fotosensitīvo epilepsiju.

Nodrošiniet skaidrus vizuālos norādījumus

Pārliecinieties, ka iezīmējumu stili sniedz skaidrus vizuālos norādījumus, ka teksts ir atlasīts. Izvairieties no stiliem, kas varētu būt neskaidri vai mulsinoši. Piemēram, izvairieties no fona krāsām, kas ir pārāk līdzīgas noklusējuma fona krāsai.

Pārbaudiet ar palīgtehnoloģijām

Pārbaudiet savus pielāgotos iezīmējumu stilus ar palīgtehnoloģijām, piemēram, ekrāna lasītājiem. Pārliecinieties, ka atlasītais teksts tiek pareizi paziņots ekrāna lasītājā un ka iezīmējumu stili netraucē lietotāja spējai navigēt un saprast saturu.

Internacionalizācijas un lokalizācijas apsvērumi

Izstrādājot vietnes globālai auditorijai, ir svarīgi ņemt vērā internacionalizāciju (i18n) un lokalizāciju (l10n). Tas ietver jūsu vietnes satura un dizaina pielāgošanu dažādām valodām, kultūrām un reģioniem.

Teksta virziens

Apzinieties dažādus teksta virzienus. Dažas valodas, piemēram, arābu un ebreju, tiek rakstītas no labās uz kreiso (RTL). Pārliecinieties, ka jūsu pielāgotie iezīmējumu stili pareizi darbojas gan ar no kreisās uz labo (LTR), gan ar RTL teksta virzieniem. Šeit var noderēt CSS loģiskās īpašības (piemēram, `margin-inline-start`, `border-inline-end`).

Kultūras atšķirības

Izvēloties iezīmējumu krāsas, ņemiet vērā kultūras atšķirības. Krāsām dažādās kultūrās var būt dažādas nozīmes. Piemēram, sarkanā krāsa vienā kultūrā var simbolizēt veiksmi, bet citā – briesmas. Izpētiet krāsu kultūras nozīmi jūsu vietnes mērķa tirgos.

Fontu atbalsts

Pārliecinieties, ka jūsu izvēlētie fonti atbalsta dažādās valodās izmantotās rakstzīmes un glifus. Izmantojiet Unicode fontus, kas atbalsta plašu rakstzīmju klāstu. Tāpat apsveriet fontu rezerves stratēģiju izmantošanu, lai nodrošinātu, ka jūsu vietnes teksts tiek pareizi attēlots pat tad, ja lietotāja ierīcē nav instalēti nepieciešamie fonti.

Praktiski piemēri un lietošanas gadījumi

Apskatīsim dažus praktiskus piemērus un lietošanas gadījumus CSS pielāgoto iezīmējumu kaskādei:

1. Semantiskais iezīmējums kodam

Jūs varat izmantot pielāgotus iezīmējumus, lai iezīmētu dažādus koda elementu veidus, piemēram, atslēgvārdus, mainīgos un komentārus. Tas var atvieglot lietotājiem koda fragmentu lasīšanu un izpratni.

            /* CSS */
::highlight(keyword) {
  color: #0077cc;
}

::highlight(variable) {
  color: #cc0077;
}

::highlight(comment) {
  color: #666666;
  font-style: italic;
}

            

              
                Copy
              
            
          

            <pre><code>
  <span style="--highlight: keyword;">function</span> <span style="--highlight: variable;">greet</span>(<span style="--highlight: variable;">name</span>) {
    <span style="--highlight: comment;">// This is a comment</span>
    console.log("Hello, " + <span style="--highlight: variable;">name</span> + "!");
  }
</code></pre>

            

              
                Copy
              
            
          

2. Meklēšanas terminu iezīmēšana

Jūs varat izmantot pielāgotus iezīmējumus, lai iezīmētu meklēšanas terminus meklēšanas rezultātos. Tas var palīdzēt lietotājiem ātri identificēt teksta daļas, kas ir saistītas ar viņu meklēšanas vaicājumu.

            /* CSS */
::highlight(search-term) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is a <span style="--highlight: search-term;">search</span> result that contains the <span style="--highlight: search-term;">search</span> term.</p>

            

              
                Copy
              
            
          

3. Obligāto lauku norādīšana veidlapās

Jūs varat izmantot pielāgotus iezīmējumus, lai norādītu obligātos laukus veidlapās. Tas var palīdzēt lietotājiem ātri identificēt laukus, kas jāaizpilda pirms veidlapas iesniegšanas.

            /* CSS */
::highlight(required) {
  background-color: #ffeeee;
  border: 1px solid red;
}

            

              
                Copy
              
            
          

            <label for="name">Name:</label>
<input type="text" id="name" <span style="--highlight: required;">required</span><br>

            

              
                Copy
              
            
          

Noslēgums

CSS pielāgoto iezīmējumu kaskāde nodrošina spēcīgus rīkus teksta atlases iezīmējumu pielāgošanai un vizuāli pievilcīgas un lietotājam draudzīgas pieredzes radīšanai. Izprotot CSS kaskādi, specifiskuma noteikumus un ::selection un ::highlight iespējas, jūs varat efektīvi pārvaldīt iezīmējumu stilus un nodrošināt, ka tie tiek piemēroti, kā paredzēts. Atcerieties ņemt vērā pieejamību un internacionalizāciju, veidojot pielāgotus iezīmējumu stilus, lai izveidotu vietni, kas ir iekļaujoša un pieejama globālai auditorijai. Rūpīgi plānojot ::selection un ::highlight izmantošanu kopā ar semantisko HTML un CSS pielāgotajām īpašībām, jūs varat sasniegt tieši vēlamo iezīmēšanas efektu, uzlabojot gan savu tīmekļa lapu lietojamību, gan vizuālo pievilcību. Šo CSS funkciju piedāvātā elastība ļauj jums izveidot pielāgotu un intuitīvu pieredzi lietotājiem, padarot jūsu saturu saistošāku un pieejamāku.